Skip to main content

Fullscreen Elements

Corva frontend apps run inside isolated frames. A normal browser modal can be clipped to the app's dashboard tile. Supported Corva UI overlays coordinate with the surrounding dashboard so they can open in the appropriate fullscreen layer.

Use the Corva UI modal​

import { useState } from 'react';
import { Button, Modal } from '@corva/ui/componentsV2';

export function DetailsModal() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open details</Button>
      <Modal
        open={open}
        title="Details"
        size="medium"
        onClose={() => setOpen(false)}
        primaryActionText="Done"
        primaryActionHandler={() => setOpen(false)}
      >
        Modal content
      </Modal>
    </>
  );
}

When rendered inside an isolated Dev Center app, the current Modal coordinates its open and close state with Corva automatically. The app does not need to call setIsFullscreenModalMode for this supported component.

Keep the app container​

Fullscreen coordination depends on the providers surrounding the app and components. Keep AppContainer as the root application shell and render supported overlays inside the app tree.

Other overlay components​

Before building a custom tooltip, menu, popover, or dialog, check the Corva UI Storybook. Supported components account for isolation, positioning, focus handling, escape behavior, and dashboard resizing.

If a custom fullscreen element is unavoidable, use the current Corva UI fullscreen coordination API rather than calling platform props directly. Confirm the supported hook with the Corva UI MCP server because this lower-level API can change.

Test these cases​

  • Open and close with the button, backdrop, close button, and Escape key as applicable.
  • Open while the app is a normal dashboard tile and while maximized.
  • Resize the dashboard tile.
  • Switch the selected well or frac fleet while the overlay is open.
  • Confirm keyboard focus returns to the triggering control.